<template>
    <div>
        <mainHeader></mainHeader>
			<!--contain-sr-->
            <div class="job">
				<h1>{{jobdetail.job_name}}<span class="floatR">{{jobdetail.payment}}</span></h1>
				<p><span>{{jobdetail.city}}</span>|<span>{{jobdetail.exp}}</span>|<span>{{jobdetail.edc}}</span></p>
				<div class="job-tag">
					<span v-for="tag in jobdetail.tags">{{tag}}</span>
				</div>
				<div class="time">更新于：{{jobdetail.date}}</div>
			</div>
			<!--job-->
            <div class="hr clearfix">
				<div class="col-xs-3 avatar" v-if="jobdetail.hr"><img :src="jobdetail.hr.avatar"></div>
				<div class="col-xs-5">
					<div class="name clearfix"><p class="floatL" v-if="jobdetail.hr">{{jobdetail.hr.hr_name}}</p><span class="floatR"><i class="glyphicon glyphicon-heart"></i>感兴趣</span></div>
					<div class="gray">
						<span v-if="jobdetail.hr">{{jobdetail.hr.company_name}}</span><span v-if="jobdetail.hr">{{jobdetail.hr.title}}</span>
					</div>
				</div>
				<div class="col-xs-4">
					<button type="button" class="btn btn-default">立即沟通</button>
				</div>
			</div>
			<!--hr-->
            <div class="detail">
				<h3 class="h3">职位描述</h3>
				<p v-html="jobdetail.body">
				</p>
			</div>
			<!--job-detail-->
            <div class="detail">
				<h3 class="h3">公司介绍</h3>
				<p v-if="jobdetail.company" v-html="jobdetail.company.body"></p>
				<router-link :to="'/company/'+jobdetail.company.id" class="companydetail" tag="div"><div class="cmp_layer"></div><a>查看全部</a></router-link>
			</div>
			<!--intro-->
			<div class="company-msg">
				<h3 class="h3" v-if="jobdetail.company">{{jobdetail.company.name}}</h3>
				<h4 v-if="jobdetail.company">{{jobdetail.company.full_name}}</h4>
				<div class="clearfix cp-detail">
					<p class="col-xs-6" v-if="jobdetail.company">
						<span>法人代表：</span>{{jobdetail.company.props.法人代表}}
					</p>
					<p class="col-xs-6" v-if="jobdetail.company">
						<span>注册资本：</span>{{jobdetail.company.props.注册资本}}
					</p>
					<p class="col-xs-6" v-if="jobdetail.company">
						<span>成立时间：</span>{{jobdetail.company.props.成立时间}}
					</p>
					<p class="col-xs-6" v-if="jobdetail.company">
						<span>经营状态：</span>{{jobdetail.company.props.经营状态}}
					</p>
					<router-link :to="'/company/'+jobdetail.company.id" class="col-xs-12">展开</router-link>
				</div>
			</div>
			<!--company-msg-->
            <div class="company clearfix">
				<div class="col-xs-3"><a v-if="jobdetail.company"><img :src="jobdetail.company.logo"></a></div>
				<div class="col-xs-9">
					<div class="clearfix">
                        <div class="col-xs-7 cp-name" v-if="jobdetail.company"><a>{{jobdetail.company.name}}</a></div>
                        <button type="button" class="btn btn-default col-xs-5">关注该公司</button>
                    </div>
					<p v-if="jobdetail.company">{{jobdetail.company.full_name}}</p>
					<p v-if="jobdetail.company">
						<template v-for="(tag,index) in jobdetail.company.tags">
                            <em class="vline" v-if="index>0"></em>{{tag}}
                        </template>
					</p>
				</div>
			</div>
			<!--company-->
			<div class="same">
				<h6>相似职位</h6>
				<ul class="samelist">
					<li class="clearfix" v-for="item in jobdetail.jobs">
						<a class="col-xs-2"><img :src="item.logo"></a>
						<div class="col-xs-10">
							<div class="clearfix">
								<a class="nametxt floatL">{{item.job}}</a>
								<span class="price floatR">{{item.payment}}</span>
							</div>
							<div class="clearfix">
								<p class="floatL">{{item.company}}<em class="vline"></em>{{item.city}}</p>
								<button type="button" class="btn btn-default floatR">立即沟通</button>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<!--same-->
			<tuijian></tuijian>
    </div>
</template>

<script>
import tuijian from './subcomponents/tj.vue'
import mainHeader from './subcomponents/mainHeader.vue'
export default {
    data() {
        return {
            jobdetail:{},
            id:this.$route.params.id
        }
    },
    created() {
        this.getJobInfo()
    },
    methods: {
        getJobInfo(){
            this.$http.get('http://127.0.0.1:3000/api/jobInfo/'+this.id+'.json').then(result => {
                this.jobdetail=result.body
            })
        }
	},
	components:{
		mainHeader,
		tuijian
	}
}
</script>

<style lang="scss" scoped>
/*job*/
.job {background: #62d5c8; padding: 20px;}
.job h1 {font-size: 19px; font-weight: bold;}
.job-tag,.job p,.job h1,.time {color: #fff;}
.job p {margin:10px 10px 10px -10px;}
.job p span {margin:0 10px;}
.job-tag span {border: 1px solid #fff; padding:5px 10px; border-radius: 50px; margin-right: 10px; display: inline-block; margin:3px 10px 3px 0;}
.job-tag,.job p {font-size: 12px; width: 80%;}
.time { margin-top: 15px;}
/*hr*/
.hr {padding: 20px 0; background: #eefbf9;}
.hr .col-xs-5 {padding-left: 0;}
.avatar img {width: 54px; height: 54px; border-radius:100%; border: 1px solid #ccc;}
.name {padding: 5px 0;}
.name  p {font-size: 17px;}
.name span {font-size: 12px; color: #fb7042; line-height: 24px;}
.gray {color: #999;}
.gray span{ margin-right:10px; font-size: 12px;}
.hr .col-xs-4 .btn {width: 100%; background: #62d5c8; color: #fff; border: none; border-radius: 50px; margin-top: 10px;}
/*job-detail*/
.detail {padding: 15px; padding-bottom: 0;}
.h3 {color: #414a60; font-weight: 700; position: relative; line-height: 44px; font-size: 15px; margin-bottom: 15px; margin-top: 0;}
.h3:after {content: ''; width: 15px; height: 2px; background-color: #62d5c8; position: absolute; left: 0; bottom: 0;}
.detail p {color: #7e8793; font-size: 15px; line-height: 26px; overflow: hidden; display: box; display: -webkit-box; line-clamp: 4; -webkit-line-clamp: 4; box-orient: vertical; -webkit-box-orient: vertical;}
.company-msg {padding: 15px;}
.company-msg h4 {font-weight: 500; color: #7e8793; margin-bottom: 15px;}
.company-msg .col-xs-6 {font-size: 12px; margin: 10px 0;}
.company-msg .col-xs-6 span {color: #9fa3b0;}
.company-msg .col-xs-12 {margin-top: 15px; border-top: 1px solid #ebecef;padding-top: 10px; text-align: center;}
.cp-detail {padding: 10px 0; border: 1px solid #ebecef;}
/*company*/
.company {background: #eefbf9; padding: 15px 0;}
.company .col-xs-9 {font-size: 12px; padding-left: 0;}
.company .col-xs-9 .cp-name {font-size: 17px; padding-left: 0; color: #414a60;}
.company .col-xs-3 a img {width: 64px; height: 64px;}
.company .col-xs-9 p {line-height: 20px;}
.company .col-xs-9 .btn { border-radius: 50px; background: #5dd5c8; border: none; color: #fff;}
.companydetail { 
	position: relative;
	a {display: block; text-align: center; padding-top: 15px;}
	.cmp_layer {height: 25px; background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,1)); position: absolute;
    width: 100%; left: 0; top: -25px;}
}
.vline {display: inline-block; width: 1px; height: 12px; vertical-align: middle; background: #e0e0e0; margin: 0 10px;}
/*same*/
.same {padding: 15px;}
.same h6 {font-size: 13px;}
.samelist li {margin-top: 10px; border-top: 1px solid #eee; padding-top: 15px;}
.samelist .col-xs-2 {padding: 0;}
.samelist .col-xs-2 img {width: 56; height: 56px;}
.samelist .col-xs-10 {padding-right: 0;}
.samelist .col-xs-10 .nametxt {color: #414A60;}
.samelist .col-xs-10 .price {color: #fc6c38; font-size: 16px;}
.samelist .col-xs-10 p {font-size: 12px; line-height: 34px;}
.samelist .col-xs-10 .btn {border-color:#5dd5c8; border-radius: 50px; color: #5dd5c8;}
</style>